<template>
  <van-row class="search_wrap">
    <!-- 商品搜索结果列表 -->
    <van-pull-refresh v-if="carList.length > 0" v-model="refreshing" :disabled="true" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" :offset="1" finished-text="没有更多了" class="refresh-list" @load="onLoad()">
        <van-cell style="padding:0;">
          <van-col :span="24" class="cars_list">
            <div v-for="(item, index) in carList" :key="index" class="item_task" @click="queryItem(item, index)">
              <div :span="24" class="task_top">
                <van-col>
                  <van-image :src="item.cover_pic" cover class="img_item" />
                </van-col>
                <van-col class="sign-total">
                  <span>{{ item.article_content }}</span>
                </van-col>
              </div>
              <div class="card_bottom">
                <div class="introduce_left">
                  <span class="liulan_sty">{{ item.create_time }}</span>
                </div>
                <div class="introduce_right">
                  <span class="liulan_sty">阅读数</span>
                  <span>{{ item.view_num }}</span>
                  <span class="dianzan_sty">点赞</span>
                  <span>{{ item.zan_num }}</span>
                </div>
              </div>
            </div>
          </van-col>
        </van-cell>
      </van-list>
    </van-pull-refresh>
    <!-- 无结果 -->
    <van-col v-if="noContent" :span="24" align="center" class="no-content">
      <van-col :span="24" align="center" class="title">抱歉，找不到相关内容</van-col>
      <van-col :span="24" align="center" class="title">换个关键词试试吧～</van-col>
      <van-col :span="24" align="center" class="no-pic" />
    </van-col>
    <!-- 搜索 -->
    <van-col :span="24" class="goods_search">
      <van-col :span="20">
        <van-search v-model="params.search_value" :placeholder="holder" :autofocus="true" shape="round" background="#f7f7f7" @search="search" @clear="searchClear"/>
      </van-col>
      <van-col v-if="holder || params.search_value" :span="4" class="search-title" align="center" @click="search">搜索
      </van-col>
    </van-col>
    <!-- 热门搜索 -->
    <van-col v-if="!noContent && carList.length == 0" :span="24" class="hot_search">
      <van-col v-if="showHostList.length > 0" :span="24" class="popular">
        <van-col :span="24" class="title1">热门搜索</van-col>
        <van-col :span="24">
          <van-col v-for="(hostItem,hostIndex) in showHostList" :key="hostIndex" class="item" @click="goItem(hostItem.keyword_content)">
            {{ hostItem.keyword_content }}
          </van-col>
        </van-col>
      </van-col>
    </van-col>
  </van-row>
</template>

<script>
import api from '@/api/car'
export default {
  data() {
    return {
      holder: '请输入搜索关键词',
      noContent: false,
      carList: [],
      showHostList: [{ keyword_content: '坦克300' }, { keyword_content: '领克05' }, { keyword_content: '领克03' }],
      refreshing: false,
      finished: false,
      loading: false,
      params: {
        page_size: 10,
        page_num: 1
      }
    }
  },
  methods: {
    queryItem(item, iedex) {
      this.$toast.fail('暂未开放')
      return
    },
    getList() {
      this.refreshing = true
      this.loading = true
      api.searchCar(this.params)
        .then(rs => {
          rs.result.forEach(el => {
            el.cover_pic = this.handle_pic(el.cover_pic)
          })
          if (rs.code === 200) {
            this.refreshing = false
            this.loading = false
            if (rs.result.count <= 0) {
              this.carList.length = 0
              this.noContent = true
            } else {
              this.noContent = false
            }
            if (this.params.page_no > 1) {
              this.carList = [...this.carList, ...rs.result]
            } else {
              this.carList = rs.result
            }
            if (rs.result.length < this.params.page_size) {
              this.finished = true
            }
          }
        })
    },
    search() {
      if (!this.params.search_value) {
        return
      }
      this.finished = false
      this.noContent = false
      this.params.page_num = 1
      this.getList()
    },
    searchClear() {
      this.noContent = false
      this.carList = []
    },
    goItem(search_value) {
      this.finished = false
      this.noContent = false
      this.params.page_num = 1
      this.params.search_value = search_value || this.params.search_value
      this.getList()
    },
    onRefresh() {
      this.params.page_num = 1
      this.getList()
    },
    // 下拉更多
    onLoad() {
      this.params.page_num++
      this.getList()
    }
  }
}
</script>

<style lang="less" scoped>
.search_wrap {
  height: 100vh;
  background-color: #f7f7f7;
  .no-content {
    padding-top: 80px;
    .title {
      font-size: 14px;
      color: #999;
    }
    .no-pic {
      padding-top: 34px;
    }
  }
  .no-content .title:nth-child(2) {
    padding-top: 6px;
  }
  .goods_search {
    position: fixed;
    top: 0;
    background: #f7f7f7;

    padding: 10px 0 10px 10px;
    .van-search {
      padding: 0;
    }
    .van-search__content {
      background: #ededed;
    }
    .search-title {
      height: 34px;
      line-height: 34px;
      font-size: 14px;
    }
  }
  .hot_search{
    margin-top: 10px;
    .popular {
      padding: 55px 16px 0;
      .title1 {
        font-size: 17px;
        font-weight: 600;
        color: #333333;
      }
      .item {
        font-size: 12px;
        color: #333333;
        padding: 5px 8px;
        background: rgba(236, 236, 236, 1);
        border-radius: 100px;
        margin: 15px 10px 0 0;
      }
      .clear {
        display: flex;
        align-items: center;
        span {
          font-size: 14px;
          color: rgba(51, 51, 51, 1);
          margin-left: 5px;
        }
      }
    }
  }
  .cars_list{
    padding: 55px 15px 15px;
    .item_task {
      box-shadow: 0px 4px 8px 4px rgba(240, 240, 240, 1);
      border-radius: 10px;
      margin-top: 10px;
      padding-bottom: 5px;
      .task_top {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 15px 14px 0px;
        .img_item {
          width: 50px;
          height: 50px;
          margin-right: 10px;
          /deep/ img{
            border-radius: 5px;
          }
        }
        .sign-total {
          display: flex;
          flex-direction: column;
          height: 50px;
          span {
            font-size: 12px;
            color: #333;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            line-height: 1.3;
          }
        }
      }
      .operation {
        display: flex;
        justify-content: flex-end;
        font-size: 12px;
        padding: 10px 16px;
        span {
          margin-left: 5px;
        }
        .item {
          margin-left: 10px;
        }
        .item.active {
          color: #E60039;
        }
      }
      .card_bottom {
        display: flex;
        align-items: center;
        justify-content: flex;
        background-color: #fff;
        border-radius: 0 0 12.5px 12.5px;
        .introduce_left {
          display: flex;
          align-items: center;
          padding-left: 15px;
          width: 100%;
          line-height: 20px;
          .liulan_sty {
            color: #999;
            font-size: 10px;
            margin-right: 5px;
          }
          .dianzan_sty {
            color: #999;
            font-size: 10px;
            margin: 0 5px 0 10px;
          }
          span {
            color: #999;
            font-size: 12px;
          }
        }
        .introduce_right{
          display: flex;
          align-items: center;
          justify-content: flex-end;
          padding-right: 15px;
          width: 50%;
          .liulan_sty {
            color: #999;
            font-size: 10px;
            margin-right: 5px;
          }
          .dianzan_sty {
            color: #999;
            font-size: 10px;
            margin: 0 5px 0 10px;
          }
          span {
            color: #999;
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>
